<template>
	<view class="page">
		<view class="student-info-box">
			<u-avatar style="border:solid 8rpx #fff" :src="studentInfo.avatar" size="180rpx" shape="circle"></u-avatar>
			<view>
				<u-text align="center" margin="20rpx 0 0 0" size="36rpx" color="white"
					:text="studentInfo.nickname + '在读' + studentInfo.gender"></u-text>
				<u-text align="center" margin="10rpx 0 0 0" size="24rpx" color="rgba(255,255,255,0.8)"
					:text="'联系方式：' + studentInfo.phone + '(' + studentInfo.parent + ')'"></u-text>
			</view>
		</view>
		<!-- 个人信息列表 -->
		<view class="main padding-0">
			<view class="bg-white radius padding">
				<view class="menu-item" v-for="item in menuList" :key="item.title" @click="openPage(item.url)">
					<u-text size="32rpx" color="#333333" :text="item.title"></u-text>
					<view>
						<u-avatar :src="item.icon" size="80rpx" shape="circle" v-if="item.title === '头像'">
						</u-avatar>
						<u-text align="right" size="32rpx" color="#666" :text="item.value" v-else></u-text>
					</view>
					<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 用户信息
const studentInfo = ref({
	avatar: '/static/image/img-math-bg.png',
	nickname: 'Zora',
	gender: '男',
	birthday: '2025-01-01',
	address: '北京市海淀区',
	school: '北京市海淀区',
	historyScore: '',
	parent: '爸爸',
	phone: '13911112222'
})

const menuList = ref([
	{
		title: '头像',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.avatar,
		url: '/pages/common/mine/avatar'
	},
	{
		title: '昵称',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.nickname,
		url: '/pages/common/mine/nickname'
	},
	{
		title: '性别',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.gender,
		url: '/pages/common/mine/sex'
	},
	{
		title: '出生日期',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.birthday,
		url: '/pages/common/mine/birthday'
	},
	{
		title: '家庭住址',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.address,
		url: '/pages/common/mine/address'
	},
	{
		title: '就读学校',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.school,
		url: '/pages/common/mine/school'
	},
	{
		title: '过往成绩单',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.historyScore,
		url: '/pages/common/mine/historyScore'
	},
	{
		title: '监护人信息',
		icon: '/static/image/img-math-bg.png',
		value: studentInfo.value.parent,
		url: '/pages/common/mine/parent'
	}
])

const openPage = (url) => {
	if (url) {
		uni.navigateTo({ url })
	}
}
</script>
<style scoped lang="scss">
.student-info-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFB74D;
	padding: 60rpx 0;
	background: url('/static/image/bg-student-info.png') no-repeat center center;
	background-size: 100% 100%;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}
</style>